<template>
  <div class="auto-bid-stats">
    <el-card class="stats-card">
      <template #header>
        <div class="card-header">
          <span class="title">
            <el-icon><TrendCharts /></el-icon>
            自动出价统计
          </span>
          <el-button 
            type="primary" 
            size="small" 
            @click="refreshStats"
            :loading="loading"
          >
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>

      <div v-if="stats" class="stats-content">
        <!-- 总体统计 -->
        <div class="stats-section">
          <h4 class="section-title">总体统计</h4>
          <el-row :gutter="16">
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-value">{{ stats.totalBids }}</div>
                <div class="stat-label">总出价次数</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-value success">{{ stats.successfulBids }}</div>
                <div class="stat-label">成功出价</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-value warning">{{ stats.failedBids }}</div>
                <div class="stat-label">失败出价</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-value primary">{{ formatAmount(stats.totalAmount) }}</div>
                <div class="stat-label">总出价金额</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 今日统计 -->
        <div class="stats-section">
          <h4 class="section-title">今日统计</h4>
          <el-row :gutter="16">
            <el-col :span="12">
              <div class="stat-item">
                <div class="stat-value">{{ stats.todayBids }}</div>
                <div class="stat-label">今日出价次数</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-item">
                <div class="stat-value primary">{{ formatAmount(stats.todayAmount) }}</div>
                <div class="stat-label">今日出价金额</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 成功率 -->
        <div class="stats-section">
          <h4 class="section-title">成功率分析</h4>
          <div class="success-rate">
            <el-progress 
              :percentage="successRate" 
              :color="getProgressColor(successRate)"
              :stroke-width="12"
              :show-text="false"
            />
            <div class="rate-text">
              成功率: {{ successRate }}%
            </div>
          </div>
        </div>

        <!-- 账号使用情况 -->
        <div class="stats-section" v-if="accountUsage.length > 0">
          <h4 class="section-title">账号使用情况</h4>
          <div class="account-usage">
            <div 
              v-for="account in accountUsage" 
              :key="account.accountId"
              class="usage-item"
            >
              <div class="account-info">
                <span class="account-name">{{ account.accountNickname }}</span>
                <span class="account-detail">{{ account.account }}</span>
              </div>
              <div class="usage-progress">
                <el-progress 
                  :percentage="account.usageRate" 
                  :color="getUsageColor(account.usageRate)"
                  :stroke-width="8"
                  :show-text="false"
                />
                <div class="usage-text">
                  {{ account.usedTimes }}/{{ account.times }} 次
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="!loading" class="no-stats">
        <el-empty description="暂无统计数据" />
      </div>

      <div v-else class="loading-stats">
        <el-skeleton :rows="6" animated />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { TrendCharts, Refresh } from '@element-plus/icons-vue'
import { autoBidService, type AutoBidStats, type AccountConfig } from '@/services/autoBidService'

interface Props {
  memberId: string
  accounts?: AccountConfig[]
}

const props = defineProps<Props>()

const stats = ref<AutoBidStats | null>(null)
const loading = ref(false)

const successRate = computed(() => {
  if (!stats.value || stats.value.totalBids === 0) return 0
  return Math.round((stats.value.successfulBids / stats.value.totalBids) * 100)
})

const accountUsage = computed(() => {
  if (!props.accounts) return []
  
  return props.accounts.map(account => {
    const usedTimes = account.usedTimes || 0
    const usageRate = account.times > 0 ? Math.round((usedTimes / account.times) * 100) : 0
    
    return {
      accountId: account.accountId,
      accountNickname: account.accountNickname,
      account: account.account,
      usedTimes,
      times: account.times,
      usageRate
    }
  }).filter(account => account.accountId) // 只显示已配置的账号
})

async function loadStats() {
  if (!props.memberId) return
  
  loading.value = true
  try {
    stats.value = await autoBidService.getAutoBidStats(props.memberId)
  } catch (error) {
    console.error('加载统计数据失败:', error)
    ElMessage.error('加载统计数据失败')
  } finally {
    loading.value = false
  }
}

async function refreshStats() {
  await loadStats()
  ElMessage.success('统计数据已刷新')
}

function formatAmount(amount: number): string {
  return new Intl.NumberFormat('ja-JP', {
    style: 'currency',
    currency: 'JPY'
  }).format(amount)
}

function getProgressColor(rate: number): string {
  if (rate >= 80) return '#67c23a'
  if (rate >= 60) return '#e6a23c'
  return '#f56c6c'
}

function getUsageColor(rate: number): string {
  if (rate >= 80) return '#f56c6c'
  if (rate >= 60) return '#e6a23c'
  return '#67c23a'
}

onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.auto-bid-stats {
  .stats-card {
    margin-bottom: 16px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
  }
  
  .stats-content {
    .stats-section {
      margin-bottom: 24px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .section-title {
      margin: 0 0 16px 0;
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }
    
    .stat-item {
      text-align: center;
      padding: 16px;
      background: #f5f7fa;
      border-radius: 8px;
      transition: all 0.3s;
      
      &:hover {
        background: #ecf5ff;
        transform: translateY(-2px);
      }
    }
    
    .stat-value {
      font-size: 24px;
      font-weight: 700;
      color: #303133;
      margin-bottom: 4px;
      
      &.success {
        color: #67c23a;
      }
      
      &.warning {
        color: #e6a23c;
      }
      
      &.primary {
        color: #409eff;
      }
    }
    
    .stat-label {
      font-size: 12px;
      color: #909399;
    }
    
    .success-rate {
      .rate-text {
        margin-top: 8px;
        text-align: center;
        font-size: 14px;
        color: #303133;
        font-weight: 500;
      }
    }
    
    .account-usage {
      .usage-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #ebeef5;
        
        &:last-child {
          border-bottom: none;
        }
      }
      
      .account-info {
        flex: 1;
        margin-right: 16px;
      }
      
      .account-name {
        display: block;
        font-size: 14px;
        color: #303133;
        font-weight: 500;
      }
      
      .account-detail {
        display: block;
        font-size: 12px;
        color: #909399;
        margin-top: 2px;
      }
      
      .usage-progress {
        flex: 1;
        max-width: 200px;
      }
      
      .usage-text {
        margin-top: 4px;
        text-align: center;
        font-size: 12px;
        color: #909399;
      }
    }
  }
  
  .no-stats {
    padding: 40px 0;
  }
  
  .loading-stats {
    padding: 20px 0;
  }
}
</style> 